<template>
  <div>
    <el-row type="flex" justify="center">
      <el-col :span="1">
        <div class="grid-content"></div>
      </el-col>
    </el-row>
    <el-row type="flex" justify="center">
      <el-col :span="18.5" class="card1">
        <h1 class="hh1">MBTI</h1>

        <el-card shadow="never" style="height: 50vh">
          <template #header>
            <div class="card-header">
              <span>题目{{ qid }}</span>
            </div>
          </template>
          <div class="question">{{ question }}</div>
          <el-row type="flex" justify="center"></el-row>

          <el-button
            type="success"
            class="box-card"
            shadow="hover"
            plain
            @click="
              open11();
              add();
              open1();
            "
            >A:{{ aa }}</el-button
          >
          <el-row type="flex" justify="center"></el-row>
          <el-button
            type="danger"
            class="box-card"
            shadow="hover"
            plain
            @click="
              open22();
              add();
              open2();
            "
            >B:{{ bb }}</el-button
          >
        </el-card>

        <div style="margin: 0 auto">
          <el-divider></el-divider>
          <el-row type="flex" justify="center">
            <!---->
            <el-form-item class="mb-4">
              <el-button type="primary" plain @click="minus()"
                >上一题</el-button
              >
              <el-button type="primary" plain @click="add()">下一题</el-button>
            </el-form-item>
          </el-row>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { h } from "vue";
import { ElNotification } from "element-plus";
import { ref } from "vue";
import {
  ChatDotRound,
  ChatLineRound,
  ChatRound,
} from "@element-plus/icons-vue";
export default {
  name: "Test",
  data() {
    return {
      qid: "",
      question: "",
      aa: "",
      bb: "",
      code: 1,
      myarray1: "",
    };
  },
  methods: {
    add() {
      if (this.code <= 92) {
        this.code += 1;
        console.log(this.code);
        this.gettest();
      } else {
        const that = this;
        if (this.code == 93) {
          that.$axios.get("/getlog", { params: { ss: this.myarray1 } });
        }
        this.$router.push({ path: "/testover", name: "Testover" });
      }
    },
    minus() {
      if (this.code >= 2) {
        this.code = this.code - 1;
        console.log(this.code);
        this.gettest();
      } else {
        alert("前面没有题目了！");
      }
    },
    gettest() {
      const that = this;
      this.$axios
        .get("/gettest", { params: { code: this.code } })
        .then(function (response) {
          // 处理成功情况
          that.qid = response["data"]["qid"];
          that.question = response["data"]["question"];
          that.aa = response["data"]["aa"];
          that.bb = response["data"]["bb"];
        })
        .catch(function (error) {
          // 处理错误情况
          console.log(error);
        });
    },
    open11() {
      this.myarray1 = this.myarray1.concat("A");
      console.log(this.myarray1);
    },
    open22() {
      this.myarray1 = this.myarray1.concat("B");
      console.log(this.myarray1);
    },
  },
  created() {
    this.myarray1 = "";
    this.code = 1;
    this.gettest();
  },
  setup() {
    const activeNames = ref([""]);
    const value = ref();
    const icons = [ChatRound, ChatLineRound, ChatDotRound];
    return { activeNames, value, icons };
  },
};
</script>

<style scoped>
.hh1 {
  font-size: 40px;
  text-align: center;
  color: rgb(90, 99, 107);
}
.el-row {
  margin-bottom: 50px;
}
.grid-content {
  border-radius: 4px;
  min-height: 5px;
  min-width: 100px;
  text-align: center;
}
.card1 {
  height: 80vh;
  width: 1100px;
  border-radius: 30px;
}
.card-header{
  font-size: 25px;
  text-align: center;
  color: rgb(90, 99, 107);
}
.question{
  font-size: 27px;
  text-align: center;
  color: rgb(90, 99, 107);
}
</style>
